	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css"
	href="themes/base/jquery.ui.all.css">
</link-->
<style>
.toggler {
	width: 500px;
	height: 200px;
}

#button {
	padding: .5em 1em;
	text-decoration: none;
}

#effect {
	width: 240px;
	height: 135px;
	padding: 0.4em;
	position: relative;
}

#effect h3 {
	margin: 0;
	padding: 0.4em;
	text-align: center;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.17.custom.js"></script>
<script type="text/javascript">
	$(function() {
		$("<p>Hi there!</p>").insertAfter("#followMe");
	})
</script>
<script>
	var index = 1;
	$(function() {
		// run the currently selected effect
		function runEffect(effectId) {
			// get effect type from 
			var selectedEffect = $("#effectTypes").val();

			// most effect types need no options passed by default
			var options = {};
			// some effects have required parameters
			if (selectedEffect === "scale") {
				options = {
					percent : 0
				};
			} else if (selectedEffect === "size") {
				options = {
					to : {
						width : 200,
						height : 60
					}
				};
			}

			//run the effect
			$("#" + effectId).effect(selectedEffect, options, 1000, callback(effectId));
			/*var temp = index;
			temp = temp%2;
			temp++;
			$("#" + temp).removeAttr("style").hide().fadeIn();
			$("#" + effectId).hide(selectedEffect, options, 1000);*/
		}
		;

		// callback function to bring a hidden box back
		function callback(effectId) {
			setTimeout(function() {
				$("#" + effectId).removeAttr("style").hide().fadeIn();
			}, 1000);
		}
		;

		// set effect from select menu value
		$("#button").click(function(event) {
			runEffect("effect"+index);
			return false;
		});
		
		/*var t;
		function runEffectInfinitely(){
			runEffect("effect"+index);
			index = index%2;
			index++;
			t=setTimeout(runEffectInfinitely, 3000);
		}
		runEffectInfinitely();*/
	});
</script>
<title>Insert title here</title>
</head>
<body>
	<p id="followMe">Follow Me</p>

	<div class="demo">

		<div class="toggler">
			<div id="effect1" class="ui-widget-content ui-corner-all">
				<h3 class="ui-widget-header ui-corner-all">Hide</h3>
				<p>1.Etiam libero neque, luctus a, eleifend nec, semper at,
					lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed,
					hendrerit vitae, mi.</p>
			</div>
			<!--<div id="effect2" class="ui-widget-content ui-corner-all">
				<h3 class="ui-widget-header ui-corner-all">Hide</h3>
				<p>2.Etiam libero neque, luctus a, eleifend nec, semper at,
					lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed,
					hendrerit vitae, mi.</p>
			</div>-->
		</div>

		<div>
			<select name="effects" id="effectTypes">
				<option value="blind">Blind</option>
				<option value="bounce">Bounce</option>
				<option value="clip">Clip</option>
				<option value="drop">Drop</option >
				<option value="explode">Explode</option>
				<option value="fold">Fold</option>
				<option value="highlight">Highlight</option>
				<option value="puff">Puff</option>
				<option value="pulsate">Pulsate</option>
				<option value="scale">Scale</option>
				<option value="shake">Shake</option>
				<option value="size">Size</option>
				<option value="slide" selected="selected">Slide</option>
			</select> <a href="#" id="button" class="ui-state-default ui-corner-all">Run
				Effect</a>
		</div>

	</div>
	<!-- End demo -->
</body>
</html>